import classNames from 'classnames'
import React, { useState } from 'react'
import styles from './index.module.scss'

function Textarea({ className, value, maxLength, ...rest }) {
    const [content, setContent] = useState(value ? value : '')
    const onChange = (e) => {
        setContent(e.target.value)
        rest.onChange()
    }
    return (
        <div className={classNames(styles.root, className)}>
            <div className='textarea-box'>
                <textarea
                    cols="5"
                    rows="5"
                    {...rest}
                    value={content}
                    onChange={e => onChange(e)}
                >
                </textarea>
            </div>
            <div className="count">{content.length}/{maxLength}</div>
        </div>
    )
}

export default Textarea